<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app"
	const pets = ref([]);
	const current = ref(0); //默认选择all

	//点击预览 
	const onPreview = function(index) {
		let urls = pets.value.map(item => item.url);
		uni.previewImage({
			current: index,
			urls
		})
	}

	//发送网络请求
	function network() {
		uni.showNavigationBarLoading()
		uni.request({
			url: "https://tea.qingnian8.com/tools/petShow",
			data: {
				size: 5,
				type: classify[current.value].key
			},
			header: {
				"access-key": 'ccc#bbb'
			}
		}).then(res => {
			if (res.data.errCode == 0) { //errCode为0则
				pets.value = [...pets.value, ...res.data.data]
			} else if (res.data.errCode === 400) {
				uni.showToast({
					title: res.data.errMsg,
					icon: "none",
					duration: 2000,
				})
			}
		}).catch(err => {
			uni.showToast({
				title: "请求有误，请重新刷新",
				icon: "none"
			})
		}).finally(() => {
			uni.stopPullDownRefresh();
			uni.hideNavigationBarLoading()
		})
	}
	//触底加载更多
	onReachBottom(() => {
		network();
	})
	//下拉刷新
	onPullDownRefresh(() => {
		pets.value = [];
		current.value = 0
		network();
	})

	// 点击刷新
	function onRefresh() {
		uni.startPullDownRefresh();
	}
	//返回顶部   
	function onTop() {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 100,
		})
	}
	//总的选项数组
	const classify = [{
		key: "all",
		value: "全部"
	}, {
		key: "dog",
		value: "狗"
	}, {
		key: "cat",
		value: "猫"
	}]
	// 计算选项数组
	const values = computed(() => classify.map(item => item.value))
	//点击菜单
	function onClickItem(e) {
		// 更新当前选中的tab索引值
		current.value = e.currentIndex
		//清空数组
		pets.value = []
		//再获取
		network();
	}
	network();
</script>
<template>
	<view class="container">
		<view class="menu">
			<uni-segmented-control :current="current" :values="values" @clickItem="onClickItem" styleType="button"
				activeColor="#99FF99">
			</uni-segmented-control>
		</view>
		<view class="layout">
			<view class="box" v-for="(item,index) in pets" :key="item._id">
				<view class="pic">
					<image lazy-load :src="item.url" mode="widthFix" @click="onPreview(index)"></image>
				</view>
				<view class="text">
					{{item.content}}
				</view>
				<view class="author">-{{item.author}}</view>
			</view>
		</view>


		<view class="float">
			<view class="item" @click="onRefresh">
				<uni-icons type="refreshempty" size="30"></uni-icons>
			</view>
			<view class="item" @click="onTop">
				<uni-icons type="arrow-up" size="30"></uni-icons>
			</view>
		</view>


		<view class="loadMore">
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>
<style lang="scss" scoped>
	.container {
		.menu {
			padding: 50rpx 50rpx 0;
		}

		.float {
			position: fixed;
			right: 30rpx;
			bottom: 80rpx;
			padding-bottom: env(safe-area-inset-bottom);

			.item {
				width: 90rpx;
				height: 90rpx;
				background: rgba(255, 255, 255, 0.6);
				border-radius: 50%;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1rpx solid #ccc;
				box-shadow: 0 5rpx 1rpx #d7d7d7;
			}
		}

		.layout {
			padding: 50rpx;

			.box {
				margin-bottom: 60rpx;
				box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.08);
				border-radius: 15rpx;
				overflow: hidden; //圆角

				.pic {
					image {
						width: 100%;
					}
				}

				.text {
					padding: 30rpx;
				}

				.author {
					padding: 0 30rpx 30rpx;
					text-align: right;
					color: #888;
					font-size: 28rpx;
				}

			}
		}

		.loadMore {
			padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
		}
	}
</style>